<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img{width: 100px;}
        *{padding: 10px;}
    </style>
</head>
<body>
    
</body>
<script>

    // 枝对象的类：div
    class Team{
        constructor(id){
            this.ele = document.createElement("div");
            this.ele.id = id;
            this.children = [];
        }
        add(child){
            this.children.push(child);
            this.ele.appendChild(child.ele);
        }
        remove(child){
            let i = 0
            this.children.some((val,idx)=>{
                i = idx;
                return val === child
            })
            this.children.splice(i, 1);
            child.ele.remove();
        }
        border(){
            this.ele.style.border = "solid 2px black";
            this.children.forEach(val=>{
                val.border();
            })
        }
        none(){
            this.ele.style.border = "none";
            this.children.forEach(val=>{
                val.none();
            })
        }
    }


    // 叶对象的类：img
    class Item{
        constructor(src){
            this.ele = document.createElement("img");
            this.ele.src = src;
        }
        add(){
            console.log("这是一个叶对象，无法添加子对象")
        }
        remove(){
            console.log("这是一个叶对象，无法删除子对象")
        }
        border(){
            this.ele.style.border = "solid 2px black";
        }
        none(){
            this.ele.style.border = "none";
        }
    }

    
    // 创建叶对象img1和2和3
    const img1 = new Item("https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png")
    const img2 = new Item("https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_e835568.png")
    const img3 = new Item("https://inews.gtimg.com/newsapp_bt/0/0923142908664_4470/0")
    // 创建枝对象imgbox1和2
    const imgbox1 = new Team("imgbox1");
    const imgbox2 = new Team("imgbox2");
    // 将叶对象img1和2组合到枝对象imgbox1和2
    imgbox1.add(img1);
    imgbox2.add(img2);
    // 又创建枝对象box
    const box = new Team("box");
    // 将枝对象imgbox1和2和叶对象img3都组合到枝对象box
    box.add(imgbox1);
    box.add(imgbox2);
    box.add(img3);
    // 将最大的枝对象box直接插入到页面
    document.body.appendChild(box.ele);

    // 开始批量操作

    // imgbox1.border();
    box.border();
    imgbox2.none();




</script>
</html>